<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE中数学计算的三种方法</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">

    </div>

</body>
<script>
    const app= Vue.createApp({ 
        data() {
            return {
                price: 200.00,
                number: 101,
                counter: 0,
                message: "<i>唯爱薇o朝圣之路</i>"
            }
        },
        // 计算属性的特性，当计算属性依赖的内容发生改变时，才会重新执行计算。
        computed: {
            //页面重新渲染，不会重新执行方法，但是刷新页面仍然会改变
            total() {
                return this.price * this.number
                //return Date.now()
            }

        },
        methods: {
            manualExecute() {
                alert("manualExecute ：edu_vlovev_cn 手动弹窗显示")
            },
            updateMessage() {
              this.message = this.message == 'edu.vlovev.cn' ? "唯爱薇o朝圣之路" : "edu.vlovev.cn"
            },
            //只要页面重新渲染，就会重新执行方法，刷新页面也会改变
            totalCompute() {
                return this.price * this.number
                //return Date.now()
            },
            counterProbe() {
                this.counter++
                this.number++
            },
            counterClear() {
                this.counter = 0
                this.number = 10
            }            
            
        },
        template:`
            <h2 v-on:click="updateMessage" v-html="message" > </h2>
            <hr />
            总价计算方法一：{{ total }}
            <hr />
            总价计算方法二：{{ price * number }}
            <hr />
            总价计算方法三：{{ totalCompute() }}
            <hr />
            <button @click="counterProbe">计数探针</button>
            <hr />
            <p>计数探针点击次数：{{ counter }}</p>
            <hr />
            <button @click="counterClear">计数清零</button>
        `
  
      })
      //只要是刷新页面则computed和methods中的函数都会发生变化
      //需要在Web控制台输入vm.$data.message = "Hello,VloveV"
      const vm = app.mount("#app")

</script>
</html>